<template>
  <div class="login">
    <section v-if="show===1">
      <div class="header logo">
        <p><i></i>dpool.top</p>
      </div>
      <div class="content">
        <div class="title">{{$t('header.login')}}</div>
        <div class="row">
          <label for="email">{{$t('login.account')}}</label>
          <input type="text" autocomplete="off" :placeholder="$t('login.email_input')" id="email" v-model="email" v-focus>
          <div class="err" v-if="emailErr">
            <p>{{emailErrText}}</p>
          </div>
        </div>
        <div class="row">
          <label for="pwd">{{$t('login.pwd')}}</label>
          <input type="password" autocomplete="new-password" :placeholder="$t('login.pwd_input')" id="pwd" v-model="password" @keyup.enter="login">
          <div class="err" v-if="passwordErr">
            <p>{{passwordErrText}}</p>
          </div>
        </div>
        <button :disabled="loading" @click="login">{{$t('header.login')}}</button>
        <p class="info clearfix">
          <router-link class="fl" to="/register">{{$t('login.no_user')}}</router-link>
          <router-link class="fr" to="/forgetpwd">{{$t('login.forget_pwd')}}</router-link>
        </p>
      </div>
    </section>
    <section v-if="show===2">
      <div class="header logo">
        <p><i></i>dpool.top</p>
      </div>
      <div class="content">
        <div class="title">{{$t('header.login')}}</div>
        <div class="row">
          <label for="tel">{{$t('login.phone_bind')}}</label>
          <input type="text" id="tel" v-model="telStar" class="tel" readonly>
        </div>
        <div class="row">
          <label for="code">{{$t('login.phone_code')}}</label>
          <input type="text" autocomplete="off" :placeholder="$t('login.phone_code_input')" id="code" v-model="code" maxlength="6" @keyup.enter="verify" v-focus>
          <button class="small fr" @click="sendCode" :disabled="time!==60">{{time===60 ? $t('login.send_code') : ($t('login.retrieve') + time + 's')}}</button>
          <div class="err" v-if="codeErr"><p>{{codeErrText}}</p></div>
        </div>
        <button :disabled="loading" @click="verify">{{$t('btn.confirm')}}</button>
        <div class="change" v-show="google_verify">
          <p @click="show=3" class="pointer">{{$t('login.switch_google')}}</p>
        </div>
      </div>
    </section>
    <section v-if="show===3">
      <div class="header logo">
        <p><i></i>dpool.top</p>
      </div>
      <div class="content">
        <div class="title">{{$t('header.login')}}</div>
        <div class="row">
          <label for="gcode">{{$t('login.google_code')}}</label>
          <input type="text" autocomplete="off" :placeholder="$t('login.google_code_input')" id="gcode" v-model="gcode" maxlength="6" @keyup.enter="verify" v-focus>
          <div class="err" v-if="gcodeErr">
            <p>{{gcodeErrText}}</p>
          </div>
        </div>
        <div class="row google-verify-lost-prompt" @click="googleVerifyLostPrompt">{{$t('login.google_code_lose')}}</div>
        <button :disabled="loading" @click="verify">{{$t('btn.confirm')}}</button>
        <div class="change" v-show="phone_verify">
          <p @click="show=2" class="pointer">{{$t('login.switch_phone')}}</p>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { login } from '@/mixins';

export default {
  mixins: [login],
};
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  height: 100%;
  width: 100%;
  background: url(../../assets/images/login/beijing.jpg) no-repeat center/100%
    100%;
  overflow: hidden;
  section {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 3.234375rem;
    height: 3.520833rem;
    background-color: #ffffff;
    border-radius: .052083rem;
    margin: 0 auto;
    .header {
      width: 1.4375rem;
      height: .255208rem;
      background: url(../../assets/images/login/liuhai.png) no-repeat
        center/100% 100%;
      margin: 0 auto .635417rem;
      &.logo {
        p {
          padding-left: .197917rem;
          i {
            position: absolute;
            left: .338542rem;
            top: .0625rem;
            display: block;
            width: .125rem;
            height: .119792rem;
            background: url(../../assets/images/logo/login.png) no-repeat
              center/100% 100%;
          }
        }
      }
      p {
        font-size: .125rem;
        line-height: .255208rem;
        letter-spacing: 1px;
        text-align: center;
        color: #fff;
        position: relative;
      }
    }
    .content {
      width: 2.625rem;
      margin: 0 auto;
      .title{
        font-size: .125rem;
        color: #73c2b4;
        margin-bottom: 0.1rem;
      }
      .row {
        position: relative;
        margin-bottom: .1875rem;
        padding-top: .197917rem;
        &:last-of-type {
          margin-bottom: 0;
        }
        &.google-verify-lost-prompt {
          text-align: right;
          color: #7fafa6;
          font-size: .072917rem;
          cursor: pointer;
        }
        button.small{
          position: absolute;
          right: 0;
          bottom: 1px;
          width: .645833rem;
          color: #565656;
          font-size: .104167rem;
          line-height: .166667rem;
          height: .166667rem;
          background: none;
          background-color: #fff;
          padding: 0;
          &::before{
            content: ' ';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            display: block;
            width: 1px;
            height: .09375rem;
            background-color: #e0e0e0;
          }
        }
        label {
          position: absolute;
          left: 0;
          top: 0;
          // display: none;
          line-height: .197917rem;
          font-size: .104167rem;
          color: #323232;
          font-weight: normal;
          font-stretch: normal;
          opacity: 1;
          transition: all .5s;
          &.fade{
            opacity: 0;
          }
        }
        input {
          display: block;
          width: 100%;
          height: .177083rem;
          line-height: .177083rem;
          background-color: #ffffff;
          border: 0;
          border: none;
          border-bottom: 1px solid #e0e0e0;
          outline: none;
          color: #323232;
          font-size: .104167rem;
          font-weight: normal;
          font-stretch: normal;
          padding-left: .010417rem;
          &::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #bdbdbd;
            font-size: .083333rem;
          }
          &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #bdbdbd;
            font-size: .083333rem;
          }
          &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #bdbdbd;
            font-size: .083333rem;
          }
          &:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #bdbdbd;
            font-size: .083333rem;
          }
        }
        .err {
          position: absolute;
          bottom: -0.09375rem;
          color: #eb547c;
          font-size: .072917rem;
          line-height: .09375rem;
        }
      }
      button {
        margin-top: .463542rem;
        &:disabled {
          cursor: not-allowed;
          background-image: linear-gradient(90deg, #c6e6e1 0%, #e0f1e5 100%),
            linear-gradient(#7a72f9, #7a72f9);
        }
        border: none;
        outline: none;
        display: block;
        border-radius: .03125rem;
        overflow: hidden;
        width: 100%;
        height: .354167rem;
        background-image: linear-gradient(90deg, #70c1b3 0%, #b2dbbf 100%),
          linear-gradient(#7a72f9, #7a72f9);
        background-blend-mode: normal, normal;
        color: #ffffff;
        font-size: .125rem;
      }
      .change {
        margin-top: .104167rem;
        text-align: center;
        color: #7fafa6;
        font-size: .072917rem;
        cursor: pointer;
      }
      .info {
        margin-top: .078125rem;
        color: #756a7f;
        font-size: .072917rem;
        line-height: .114583rem;
        a {
          color: #7fafa6;
        }
      }
    }
  }
}
</style>
